<!DOCTYPE html>
  <html>
  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
      <link rel="stylesheet" href="../../css/api.css">
      <link rel="stylesheet" href="../../css/base_bai/base.css">
      <title>商品数量</title>

      <style>


      html, body{font-size: 100%;background: #F5F5F5}
      .van-nav-bar .van-icon{color:black;}

      .show_title{background: white;padding: .5rem}
      .show_title>spam{padding: 0 .3rem}
      .shop_list{    display: flex;padding: 1rem;background: white;border-bottom: 1px solid #f3f3f3;align-items: center;}
      .shop_list>span{padding: 0 .5rem;font-size: .8rem}



      </style>
  </head>
  <body>
  <div id="app" v-cloak>

    <div>
        <van-nav-bar class="m-header" title="商品数量（9）" left-arrow @click-left="  closeWin()" />
    </div>



      <div style="margin-top:.5rem">
        <van-list   v-model="loading"   :finished="finished"  finished-text="没有更多了"  @load="onLoad"  >
            <div class="show_title">
              <span>序号</span>
              <span>商品ID</span>
              <span>商品名称</span>
            </div>
            <div class="shop_list"  v-for="item in list" :key="item"  :title="item" >
              <span v-html="item"></span>
              <span>36555</span>
              <span>商品名称商品名称商品名称商品名称</span>

            </div>
          </van-list>

      </div>



  </div>
  </body>
  <script src="../../script/api.js"></script>
  <script src="../../script/base_bai/vue.js"></script>
  <script src="../../script/base_bai/vant.js"></script>
  <script src="../../script/base_bai/base.js"></script>
  <script src="../../script/base_bai/temp.js"></script>
  <script type="text/javascript">
      apiready = function(){
            headerH = $api.fixStatusBar($api.byId('app'));
        Vue.prototype.$ac = api;
        initVue()
      };
      if (BrowserType() == 'pc') {
          initVue()
      }
      function initVue() {
          new Vue({
              el: '#app',
            // data: temp.center.order_list,
            data:{
              list: [],
              loading: false,
              finished: false
            },
            methods: {
              onLoad() {
      console.log(1)
                // 异步更新数据
                setTimeout(() => {
                  for (let i = 0; i < 9; i++) {
                    this.list.push(this.list.length + 1);
                  }
                  // 加载状态结束
                  this.loading = false;

                  // 数据全部加载完成
                  if (this.list.length >= 9) {
                    this.finished = true;
                  }
                }, 500);
              }
            }

          })
      }
  </script>
  </html>
